<template>
  <div>
    <!--订单审核-->
    <el-table :data="auditLists"   max-height="550px">
      <el-table-column  prop="orderSn"   label="订单编号" width="130" :header-align="'center'" :align="'center'"></el-table-column>
      <el-table-column label="产品信息" width="110" :header-align="'center'" :align="'center'">
        <template slot-scope="scope">
          <el-button  v-perm="'examine'" type="text" size="small" @click="showOrder(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column  prop="orderAmount" label="订单金额" width="130" :header-align="'center'" :align="'center'"></el-table-column>
      <el-table-column  prop="createTime" label="创建时间" width="180" :header-align="'center'" :align="'center'"></el-table-column>
      <el-table-column  prop="employee.adminName" label="下单人" width="150" :header-align="'center'" :align="'center'">
      </el-table-column>
      <el-table-column prop="orderState" label="审核进度" width="80" :header-align="'center'" :align="'center'">
        <template scope="scope">
          <el-tag v-if="scope.row.orderState == 0"  type="danger">待审核</el-tag>
          <el-tag v-if="scope.row.orderState == 1"  type="danger">待复审</el-tag>
          <el-tag v-if="scope.row.orderState == 2"  type="danger">审核未通过</el-tag>
          <el-tag v-if="scope.row.orderState == 7"  type="danger">待终审</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" :align="'center'" width="200" :header-align="'center'">
        <template scope="scope">
          <el-button v-perm="'examine'" type="text" size="small"  @click="handlePass(scope.row.orderSn)"><i class="el-icon-c-scale-to-original"/>审核</el-button>
          <el-button v-perm="'cancellation'" type="text" size="mini" @click="handleCancel(scope.$index, scope.row)" ><i class="el-icon-switch-button"/>取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 20, 50]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="currentPage" :page-size="pageSize"
                     :total="totals" style="float:left; margin-left: 40px;"  >
      </el-pagination>
    </el-col>
    <el-dialog title="订单详情" :visible.sync="showOrderFormVisible"  v-loading="formLoading" :close-on-click-modal="false"  class="show_dialog">
      <el-form :model="showOrderForm" label-width="100px" ref="showOrderForm">
        <h3> 一 基本信息</h3>
        <el-row :gutter="24" >
          <el-col :span="8">
            <el-form-item label="订单编号:">
              <span>{{ showOrderForm.orderSn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单备注:">
              <span>{{ showOrderForm.notes }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单人:">
              <span>{{ showOrderForm.employee.adminName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <h3>二 客户信息</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="客户名称:">
              <span>{{showOrderForm.customer.customerName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式:"><span>{{showOrderForm.customer.phoneNumber}}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="客户销售渠道:">
              <div>{{ gettypeNameById(showOrderForm.customer.typeId) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户级别:" >
              <div>{{ getlabelNameById(showOrderForm.customer.labelId) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户来源:" >
              <div>{{ getsourceNameById(showOrderForm.customer.sourceId) }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <h3>三 收货信息</h3>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="收货人:">
              <div>{{ showOrderForm.orderDetail.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式:">
              <div>{{ showOrderForm.orderDetail.phone }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属省份:">
              <div>{{ showOrderForm.orderDetail.province }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属市:">
              <div>{{ showOrderForm.orderDetail.city }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区:">
              <div>{{ showOrderForm.orderDetail.district }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="收货地址:">
          <div>{{ showOrderForm.orderDetail.detailAddress}}</div>
        </el-form-item>
        <h3>四 发货信息</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="发货方式:">
              <span>{{showOrderForm.logisticsMethods}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递公司:">
              <span>{{showOrderForm.logisticsCompanies}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递单号:">
              <div>{{ showOrderForm.trackingNumbe}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="下单数量:">
          <div>{{ showOrderForm.productNumber}}</div>
        </el-form-item>
        <el-form-item label="发货备注:">
          <div>{{ showOrderForm.notes}}</div>
        </el-form-item>
        <el-form-item label="发货凭证:">
          <el-image class="image-container-box" :src="showOrderForm.voucher" :preview-src-list="[ExamineForm.voucher]" fit="contain" style="max-width: 100%; max-height: 180px;"></el-image>
        </el-form-item>
        <h3>五 回款信息</h3>
        <el-form-item label="订单金额:">
          <div>{{ showOrderForm.orderAmount}}</div>
        </el-form-item>
        <el-form-item label="回款图片:">
          <el-image class="image-container-box" :src="showOrderForm.receipt" :preview-src-list="[ExamineForm.receipt]" fit="contain" style="max-width: 100%; max-height: 180px;"></el-image>
        </el-form-item>
        <h3>订单产品</h3>
        <el-table :data="productList"  style="width: 100%;">
          <el-table-column prop="productName" label="产品名称" width="130"></el-table-column>
          <el-table-column prop="picture" label="产品图片" width="130">
            <template slot-scope="scope">
              <img :src="scope.row.picture" :preview-src-list="[scope.row.picture]" alt="Product Image" style="width: 100px; height: 100px;">
            </template>
          </el-table-column>
          <el-table-column prop="price" label="产品价格" width="100" :align="'center'"></el-table-column>
          <el-table-column prop="costPrice" label="售价" width="100":align="'center'"></el-table-column>
          <el-table-column prop="orderNum" label="选购数量" width="100":align="'center'"></el-table-column>
          <el-table-column prop="salePrice" label="成交价" width="100":align="'center'"></el-table-column>
          <el-table-column prop="orderAmount" label="金额" width="100":align="'center'"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="showOrderFormVisible = false">我已了解</el-button>
      </div>
    </el-dialog >
    <!--   订单审核-->
    <el-dialog title="订单审核" :visible.sync="ExamineFormVisible"  v-loading="formLoading" :close-on-click-modal="false" width="60%" class="edit_dialog">
      <el-form :model="ExamineForm" label-width="100px" ref="ExamineForm" :rules="ExamineFormRules">
        <h3> 一 基本信息</h3>
        <el-row :gutter="24" >
          <el-col :span="8">
            <el-form-item label="订单编号:">
              <span>{{ ExamineForm.orderSn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单备注:">
              <span>{{ ExamineForm.notes }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单人:">
              <span>{{ ExamineForm.employee.adminName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <h3>二 客户信息</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="客户名称:">
              <span>{{ExamineForm.customer.customerName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式:"><span>{{ExamineForm.customer.phoneNumber}}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="客户销售渠道:">
              <div>{{ gettypeNameById(ExamineForm.customer.typeId) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户级别:" >
              <div>{{ getlabelNameById(ExamineForm.customer.labelId) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户来源:" >
              <div>{{ getsourceNameById(ExamineForm.customer.sourceId) }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <h3>三 收货信息</h3>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="收货人:">
              <div>{{ ExamineForm.orderDetail.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式:">
              <div>{{ ExamineForm.orderDetail.phone }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属省份:">
              <div>{{ ExamineForm.orderDetail.province }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属市:">
              <div>{{ ExamineForm.orderDetail.city }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区:">
              <div>{{ ExamineForm.orderDetail.district }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="收货地址:">
          <div>{{ ExamineForm.orderDetail.detailAddress}}</div>
        </el-form-item>
        <h3>四 发货信息</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="发货方式:">
              <span>{{ExamineForm.logisticsMethods}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递公司:">
              <span>{{ExamineForm.logisticsCompanies}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递单号:">
              <div>{{ ExamineForm.trackingNumbe}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="下单数量:">
          <div>{{ ExamineForm.productNumber}}</div>
        </el-form-item>
        <el-form-item label="发货备注:">
          <div>{{ ExamineForm.notes}}</div>
        </el-form-item>
        <el-form-item label="发货凭证:">
          <el-image class="image-container-box" :src="ExamineForm.voucher" :preview-src-list="[ExamineForm.voucher]" fit="contain" style="max-width: 100%; max-height: 180px;"></el-image>
        </el-form-item>
        <h3>五 回款信息</h3>
        <el-form-item label="订单金额:">
          <div>{{ ExamineForm.orderAmount}}</div>
        </el-form-item>
        <el-form-item label="回款图片:">
          <el-image class="image-container-box" :src="ExamineForm.receipt" :preview-src-list="[ExamineForm.receipt]" fit="contain" style="max-width: 100%; max-height: 180px;"></el-image>
        </el-form-item>
        <h3>订单产品</h3>
        <el-table :data="productList"  style="width: 100%;">
          <el-table-column prop="productName" label="产品名称" width="130"></el-table-column>
          <el-table-column prop="picture" label="产品图片" width="130">
            <template slot-scope="scope">
              <img :src="scope.row.picture" :preview-src-list="[scope.row.picture]" alt="Product Image" style="width: 100px; height: 100px;">
            </template>
          </el-table-column>
          <el-table-column prop="price" label="产品价格" width="100" :align="'center'"></el-table-column>
          <el-table-column prop="costPrice" label="售价" width="100":align="'center'"></el-table-column>
          <el-table-column prop="orderNum" label="选购数量" width="100":align="'center'"></el-table-column>
          <el-table-column prop="salePrice" label="成交价" width="100":align="'center'"></el-table-column>
          <el-table-column prop="orderAmount" label="金额" width="100":align="'center'"></el-table-column>
        </el-table>
        <h3>订单审核</h3>
        <el-form-item label="订单状态:">
          <span>{{ ExamineForm.orderState === 0 ? '待审核' : (ExamineForm.orderState === 1 ? '待复审' : '') }}</span>
        </el-form-item>
        <el-form-item label="审核意见:" prop="findingOfAudit">
          <el-radio-group v-model="ExamineForm.findingOfAudit">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下级审核人" v-if="showNextReviewer" prop="orderReviewerId">
          <el-select v-model="ExamineForm.orderReviewerId" placeholder="请选择">
            <el-option label="林阳阳" :value="377"></el-option>
            <el-option label="侯冬军" :value="380"></el-option>
            <el-option label="李曼曼" :value="379"></el-option>
            <el-option label="屈梦园" :value="390"></el-option>
            <el-option label="毛金雨" :value="387"></el-option>
            <el-option label="吴梦"  :value="389"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核理由" v-if="ExamineForm.findingOfAudit === 2" prop="reviewRemarks" >
          <el-input v-model="ExamineForm.reviewRemarks" type="textarea" :rows="2"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="submit" :loading="formLoading">提交</el-button>
        <el-button @click.native="ExamineFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--  取消订单-->
    <el-dialog title="取消订单" :visible.sync="cancellationFormVisible" :close-on-click-modal="false" class="edit_dialog">
      <el-form :model="cancellationForm" label-width="100px"  ref="cancellationForm" :rules="cancellationFormRules">
        <h3>  订单信息</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="订单编号:">
              <span>{{ cancellationForm.orderSn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单备注:">
              <span>{{ cancellationForm.notes }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态:">
              <span>{{ getOrderStateText(cancellationForm.orderState) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="取消原因:" prop="reasonForCancellation">
          <el-input v-model="cancellationForm.reasonForCancellation" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancellationFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="ConfirmCancel" :loading="cancellationFormLoding">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>


export default {

  data() {
    return {
      //取消订单
      cancellationFormVisible:false,
      cancellationFormLoding:false,
      cancellationForm:{
        orderSn:'',
        notes:'',
        orderState:'',
        reasonForCancellation:'',
      },
      cancellationFormRules:{

        reasonForCancellation:[{
          required: true, message: '请输入取消原因', trigger: 'blur'
        }],
      },

      //客户数据信息
      // 客户级别
      custoLabel: [],
      // 客户销售渠道
      custoType: [],
      //客户来源
      custoSource: [],
      //下单产品的数据
      productList:[],
      auditLists: [],//获取订单列表
      listloding:false,
      loginId: '',
      formLoading: false,
      //审核数据
      ExamineForm: {
        employee:{},
        reviewRemarks:'',
        orderDetail:{},

        customer:{},
        findingOfAudit:'',
        orderReviewerId:'',
        orderSn:'',
        orderState:'',
        productId:'',
      },
      //订单详情数据
      showOrderForm: {
        employee:{},
        reviewRemarks:'',
        orderDetail:{},
        customer:{},
        findingOfAudit:'',
        orderReviewerId:'',
        orderSn:'',
        orderState:'',
        productId:'',
      },
      showOrderFormVisible: false,
      ExamineFormVisible: false,//编辑界面是否显示
      ExamineFormRules:{
        findingOfAudit: [
          { required: true, message: '请选择审核意见', trigger: 'change' }
        ],
        reviewRemarks: [
          { required: true, message: '请输入审核未通过理由', trigger: 'change' }
        ],
        orderReviewerId: [
          { required: true, message: '请选择选择下级审核人', trigger: 'change' }
        ],
      },

      currentPage: 1,
      pageSize: 5,
      orderReviewer: {
        id: '',
        adminName: '',
      },
      //传递给后端数据
      orderReviewerId:'',
      reviewRemarks:'',
      orderSn:'',
      orderState:'',
    }
  },
  computed: {
    // 根据订单状态和审核结果动态控制是否显示下级审核人
    showNextReviewer() {
      return this.ExamineForm.orderState === 0 && this.ExamineForm.findingOfAudit === 1;
    },
  },
  methods: {

// 点击分页实现
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getAuditLists();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置当前页码为1
      this.getAuditLists();
    },
    //数据转换
    getOrderStateText(orderState) {
      if (orderState === 3) {
        return '待发货';
      } else if (orderState === 4) {
        return '已发货';
      } else if (orderState === 0) {
        return '待审核';
      } else if (orderState === 1) {
        return '待复审';
      } else if (orderState === 5) {
        return '交易成功';
      }else if (orderState === 6) {
        return '订单已取消';
      }else if (orderState === 7) {
        return '待终审';
      } else {
        return '未知状态';
      }
    },
    //获取客户数据信息
    gettypeNameById(typeId) {
      const category = this.custoType.find(item => item.id === typeId);
      return category ? category.customerType : '';
    },
    getlabelNameById(labelId) {
      const category = this.custoLabel.find(item => item.id === labelId);
      return category ? category.customerLabel : '';
    },
    getsourceNameById(sourceId) {
      const category = this.custoSource.find(item => item.id === sourceId);
      return category ? category.customerSource : '';
    },
    //获取类型
    getType() {
      this.$http.get("/customerType").then(res => {
        this.custoType = res.data;
      })
    },
    //获取标签
    getLabel() {
      this.$http.get("/customerLabel").then(res => {
        this.custoLabel = res.data;
      })
    },
    //获取来源
    getSerouce() {
      this.$http.get("/customerSource").then(res => {
        this.custoSource = res.data;
      })
    },
    getproductLists: function (productId) {
      this.$http.get(`/productList/list/${productId}`).then((res) => {
        this.productList = res.data;
      });
    },
    getOrderReviewer() {
      this.$http.get("/employee").then(res => {
        this.orderReviewer = res.data;
      });
    },
    //订单审核
    handlePass(orderSn){
      // 使用编程式导航跳转到审核页面，并携带订单编号
      this.$router.push({ name: '订单审核', params: { orderSn: orderSn } });
    },
    // 订单审核
    // handlePass: function (index, row) {
    //   this.ExamineForm = Object.assign({}, row);
    //   this.ExamineFormVisible = true;
    //   //执行获取数据方法
    //   this.getLabel();
    //   this.getType();
    //   this.getSerouce();
    //   this.getOrderReviewer();
    //   // 调用 getproductLists 方法获取产品数据
    //   const orderSn = this.ExamineForm.orderSn;
    //   //根据订单编号查询订单中间表获取产品信息
    //   this.$http.post("/orderProducid/"+orderSn).then(res => {
    //     // 使用 Object.values 将对象转换为数组
    //     this.productList = res.data;});
    // },
    showOrder: function (index, row) {
      this.showOrderForm = Object.assign({}, row);
      this.showOrderFormVisible = true;
      //执行获取数据方法
      this.getLabel();
      this.getType();
      this.getSerouce();
      this.getOrderReviewer();
      // 调用 getproductLists 方法获取产品数据
      const orderSn = this.showOrderForm.orderSn;
      //根据订单编号查询订单中间表获取产品信息
      this.$http.post("/orderProducid/"+orderSn).then(res => {
        // 使用 Object.values 将对象转换为数组
        this.productList = res.data;});
    },
    //显示取消订单页面
    handleCancel: function (index, row) {
      this.cancellationForm = Object.assign({}, row);
      this.cancellationFormVisible = true;
    },
    //取消订单
    ConfirmCancel: function (index, row) {
      this.$refs.cancellationForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认取消该订单吗？', '提示', {}).then(() => {
            this.cancellationFormLoding = true;
            let para = Object.assign({}, this.cancellationForm);
            this.$http.put("/orderList/cancel", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message: '取消订单成功',
                  type: 'success'
                });
                this.$refs['cancellationForm'].resetFields();
              } else {
                this.$message.error("系统繁忙，请稍后重试!!!【500】");
              }
              this.cancellationFormLoding = false;
              this.cancellationFormVisible = false;
              //更新页面数据
              this.getAuditLists();

            });
          });
        }
      });
    },

//获取订单列表
    getAuditLists() {
      const logininfo = JSON.parse(localStorage.getItem("logininfo"));
      this.loginId = logininfo.id;
      this.listloding = true;
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        loginId: this.loginId,
      };
      this.$http.post("/orderList/auditOrders/", para).then((res) => {
        this.auditLists = res.data.records;
        this.totals = res.data.total;
        this.currentPage = para.currentPage;// 更新当前页数
        this.listloding = false;
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!【400,404】")
      });
    },

    submit: function () {
      this.$refs.ExamineForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.formLoading = true;
            let para={
              orderReviewerId:this.ExamineForm.orderReviewerId,//审核人id
              reviewRemarks:this.ExamineForm.reviewRemarks,//审核理由
              orderSn:this.ExamineForm.orderSn,//订单id
              orderState:this.ExamineForm.orderState,//订单状态
              findingOfAudit:this.ExamineForm.findingOfAudit,//审核结果
            };
            this.$http.put("/orderList/Examine", para).then(res => {
              console.log(para)
              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['ExamineForm'].resetFields();
              } else {
                this.$message.error("系统繁忙，请稍后重试!!!【500】");
              }
              this.formLoading = false;
              this.ExamineFormVisible = false;
              this.getAuditLists();
            });
          });
        }
      });
    },

  },
  mounted() {
    this.getAuditLists();


  },
}
</script>
<style>

</style>

<style scoped>

</style>